<!--
 * @Author: 黄荣基
 * @Date: 2020-11-12 10:52:12
 * @LastEditors: 黄荣基
 * @LastEditTime: 2020-11-20 18:31:47
-->
<template>
  <div class="home">
    <div class="wrapper">
      <div class="page-main">
        <div class="form-wrapper">
          <div
            class="newsItem box-row"
            v-for="(item, index) in newsList"
            v-bind:key="index"
            @click="onClick(item)"
          >
            <img class="logo" :src="item.author_avatar" />
            <div class="title-box text-left">
              <p class="title text-left">{{ item.title }}</p>
              <p class="time">{{ item.created_at }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src

  export default {
    name: 'Home',
    components: {},
    data() {
      return {
        newsList: ''
      };
    },
    methods: {
      onClick(item) {
        console.log(item.post_id);
        // 把post_id存到sessionStorage缓存中
        sessionStorage.setItem('post_id', item.post_id);
        this.$router.push({
          name: 'About'
        });
      }
    },
    mounted() {
      // 显示加载Toast Loading
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      // 调用接口
      this.$http.news.getNewsList().then(res => {
        // 清除Loading
        this.$toast.clear();
        console.log(res);
        // 赋值
        this.newsList = res;
      });
    }
  };
</script>
<style>
  .home {
    background-color: #f4f4f4;
  }
  .form-wrapper {
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .logo {
    width: 42px;
    height: 42px;
    padding: 5px;
    position: relative;
    left: 0;
  }
  .newsItem {
    padding: 5px 0;
    border-bottom: 1px solid #000;
    position: relative;
  }
  .title-box {
    padding: 3px;
    width: 86%;
  }
  .title {
    font-size: 18px;
    color: #000;
    padding: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .time {
    font-size: 12px;
    color: grey;
    padding: 3px;
  }
</style>
